<template>
    <el-dialog v-model="visible" :title="title" @close="cancel" width="80%">
        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
            <el-form-item label="栏目名称" prop="name">
                <el-input v-model="dataForm.name" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="栏目描述" prop="description">
                <el-input v-model="dataForm.description" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="栏目状态" prop="status">
                <el-switch v-model="dataForm.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启动" inactive-text="禁用" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="dataForm.sort" :min="0" />
            </el-form-item>
            <el-form-item label="定时发布" prop="publishTime">
                <el-date-picker v-model="dataForm.publishTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"  />
            </el-form-item>
            <el-form-item label="定时撤销" prop="revokeTime">
                <el-date-picker v-model="dataForm.revokeTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"  />
            </el-form-item>
            <el-form-item v-if="dialogType=='addS'" label="模板类型：" prop="templateType">
                <el-radio-group v-model="dataForm.templateType">
                    <!-- <el-radio :value="1" size="large" border>
            <div style="width: 100%;">全内容</div>
            <img src="@/assets/content1.jpg" alt="" style="width: 150px;height: 150px;" />
            <el-button type="text" @click="templateView(1)">查看</el-button>
          </el-radio>
          <el-radio :value="2" size="large" border>
            <div style="width: 100%;">列表形式1</div>
            <img src="@/assets/list1.jpg" alt="" style="width: 150px;height: 150px;" />
            <el-button type="text" @click="templateView(2)">查看</el-button>
          </el-radio>
          <el-radio :value="3" size="large" border>
            <div style="width: 100%;">列表形式2</div>
            <img src="@/assets/list2.jpg" alt="" style="width: 150px;height: 150px;" />
            <el-button type="text" @click="templateView(3)">查看</el-button>
          </el-radio>
          <el-radio :value="4" size="large" border>
            <div style="width: 100%;">图文形式1</div>
            <img src="@/assets/imgtext1.png" alt="" style="width: 150px;height: 150px;" />
            <el-button type="text" @click="templateView(4)">查看</el-button>
          </el-radio>
          <el-radio :value="5" size="large" border>
            <div style="width: 100%;">图文形式2</div>
            <img src="@/assets/imgtext2.png" alt="" style="width: 150px;height: 150px;" />
            <el-button type="text" @click="templateView(5)">查看</el-button>
          </el-radio> -->
                    <el-radio :value="1" size="large" border style="margin-bottom:10px;">通用模板（列表）</el-radio>
                    <el-radio :value="2" size="large" border style="margin-bottom:10px;">通用模板（全内容）</el-radio>
                    <el-radio :value="3" size="large" border style="margin-bottom:10px;">通用模板（图文）</el-radio>
                    <el-radio :value="4" size="large" border style="margin-bottom:10px;">通用模板（图片）</el-radio>
                    <el-radio :value="5" size="large" border style="margin-bottom:10px;">通用模板（视频）</el-radio>
                    <el-radio :value="6" size="large" border style="margin-bottom:10px;">鞍钢楷模专属模版</el-radio>
                    <el-radio :value="7" size="large" border style="margin-bottom:10px;">董事集团会专属模版</el-radio>
                    <el-radio :value="8" size="large" border style="margin-bottom:10px;">主要荣誉专属模版</el-radio>
                    <!-- <el-radio :value="9" size="large" border style="margin-bottom:10px;">集团高管专属模板</el-radio> -->
                    <el-radio :value="10" size="large" border style="margin-bottom:10px;">鞍钢出版物专属模板</el-radio>
                    <el-radio :value="11" size="large" border style="margin-bottom:10px;">时政要闻专属模板</el-radio>
                    <el-radio :value="12" size="large" border style="margin-bottom:10px;">股票信息专属模板</el-radio>
                    <el-radio :value="13" size="large" border style="margin-bottom:10px;">报告专属模板</el-radio>
                    <el-radio :value="14" size="large" border style="margin-bottom:10px;">产品专属模板</el-radio>
                    <el-radio :value="15" size="large" border style="margin-bottom:10px;">文化专属模板</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { addPColumn, addSColumn, editPColumn, editSColumn } from '@/api/allApi'
import { useRouter } from 'vue-router'

const emit = defineEmits(['resetList'])

const visible = ref(false)
const title = ref('新增根栏目')
const dialogType = ref('addP')
const dataFormRef = ref()
const dataForm = reactive({
	name: '',
	description: '',
	status: 0,
	sort: '',
	templateType: '',
	publishTime: '',
	revokeTime: ''
})
const dataRules = reactive({
	templateType: [{ required: true, message: '请输入类型', trigger: 'change' }],
	name: [{ required: true, message: '请输入名称', trigger: 'change' }]
})
const rowDate = reactive({})

const init = (type: string, row: any) => {
	visible.value = true
	dialogType.value = type
	Object.assign(rowDate, row) //浅拷贝，将row赋值给rowDate，用以前直接=赋值的形式会报错
	switch (type) {
		case 'addP':
			title.value = '新增根栏目'
			break
		case 'addS':
			title.value = '新增子栏目'
			break
		case 'editP':
			title.value = '修改根栏目'
			//回显
			for (let key in dataForm) {
				dataForm[key] = row[key]
			}
			break
		case 'editS':
			title.value = '修改子栏目'
			for (let key in dataForm) {
				dataForm[key] = row[key]
			}
			break
		default:
			break
	}
}
const submit = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (valid) {
			let api = addPColumn
			let obj = {
				...dataForm,
				tenantId: JSON.parse(localStorage.getItem('userInfo')).id, //租户id
				websiteId: Number(localStorage.getItem('WebsiteId')) //网站id
			}

			switch (dialogType.value) {
				case 'addP':
					api = addPColumn
					obj.creator = JSON.parse(localStorage.getItem('userInfo')).id
					break
				case 'addS':
					api = addSColumn
					obj.creator = JSON.parse(localStorage.getItem('userInfo')).id
					obj.parentId = rowDate.id
					break
				case 'editP':
					api = editPColumn
					obj.updater = JSON.parse(localStorage.getItem('userInfo')).id
					obj.categoryId = rowDate.id
					break
				case 'editS':
					api = editSColumn
					obj.updater = JSON.parse(localStorage.getItem('userInfo')).id
					obj.categoryId = rowDate.id
					obj.parentId = rowDate.parentId
					break
				default:
					break
			}
			api(obj).then((res: any) => {
				if (res.code === 0) {
					ElMessage.success('操作成功')
					emit('resetList')
					cancel()
				} else {
				}
			})
		}
	})
}
const cancel = () => {
	visible.value = false
    dataForm.templateType = ''
	dataFormRef.value.resetFields()
}
const router = useRouter()
const templateView = templateType => {
	// 在新标签页中打开
	const routeData = router.resolve({
		path: `/preview`,
		query: {
			// parentId: row.topId,
			// parentName: row.topName,
			// currentId: row.id,
			type: templateType
		}
	})
	window.open(routeData.href, '_blank')
}

defineExpose({
	init
})
</script>
<style lang="scss" scoped>
.inp-width {
	width: 220px;
}
.el-radio.is-bordered.el-radio--large {
	height: auto;
}
::v-deep(.avatar-uploader .el-upload) {
	border: 2px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
::v-deep(.avatar-uploader .el-upload:hover) {
	border-color: #409eff;
}
::v-deep(.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 150px;
	height: 150px;
	line-height: 150px;
	text-align: center;
}
::v-deep(.avatar) {
	width: 150px;
	height: 150px;
	display: block;
}
</style>
